import {
    LoadingOutlined,
} from '@ant-design/icons';

function Button(props) {
    console.log(props)
    const {
        span,
        line,
        disabled,
        color,
        children
    } = props;
    return (
        <div className="flex justify-center justify-items-center">
            {
                disabled ? <div className="border border-gray-300 bg-gray-100 w-100 h-50 p-4 rounded-md m-4 shadow-md text-gray-300">
                    <div className="flex justify-around justify-items-center">{children}</div>
                </div> : <div className={line ?
                    `border-2 border-${color ? color : 'gray'}-500 w-100 h-50 p-4 shadow-md text-${color ? color : 'gray'}-500  rounded-md m-4 font-semibold cursor-pointer 
                transform duration-100 hover:border-${color ? color : 'gray'}-400 text-${color ? color : 'gray'}-400 shadow-sm` :
                    `bg-${color ? color : 'gray'}-500 w-100 h-50 p-4 shadow-md text-white  rounded-md m-4 font-semibold cursor-pointer 
                transform duration-100 hover:bg-${color ? color : 'gray'}-400 shadow-sm`} onClick={() => {
                        console.log('0')
                    }}>
                    <div className="flex justify-around justify-items-center">
                        {
                            span ? <><LoadingOutlined width={50} height={50} />&nbsp;&nbsp;{children}</> : <>{children}</>
                        }
                    </div>
                </div>
            }
        </div>
    );
}
export default Button;